{{ title 'Crates' }}

<div class="crates-heading">
  <h1>
    {{svg-jar "crate"}}
    All Crates
    {{#if this.letter}}
      <small>starting with '{{this.letter}}'</small>
    {{/if}}
  </h1>
</div>

<div id='selection'>
  {{#each this.alphabet as |letter|}}
    <LinkTo @query={{hash letter=letter page=1}}>
      {{ letter }}
    </LinkTo>
  {{/each}}

  <select {{on "change" (action "handleSelection")}}>
    <option>Filter by the letter...</option>
    {{#each this.alphabet as |letter|}}
      <option value={{letter}} selected={{eq letter this.letter}}>{{ letter }}</option>
    {{/each}}
  </select>
</div>

<div id='results'>
  <div class='nav' data-test-crates-nav>
    <span class='amt small'>
      Displaying
      <span class='cur' data-test-current-rows>{{ this.currentPageStart }}-{{ this.currentPageEnd }}</span>
      of <span class='total' data-test-total-rows>{{ this.totalItems }}</span> total results
    </span>
  </div>

  <div class='sort' data-test-crates-sort>
    <span class='small'>Sort by</span>

    <Dropdown class="dropdown-container" as |dd|>
      <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
        {{svg-jar "sort"}}
        {{ this.currentSortBy }}
        <span class='arrow'></span>
      </dd.Trigger>

      <dd.Content @tagName="ul" class="dropdown">
        <li>
          <LinkTo @query={{hash page=1 sort="alpha"}}>
            Alphabetical
          </LinkTo>
        </li>
        <li>
          <LinkTo @query={{hash page=1 sort="downloads"}}>
            All-Time Downloads
          </LinkTo>
        </li>
        <li>
          <LinkTo @query={{hash page=1 sort="recent-downloads"}}>
            Recent Downloads
          </LinkTo>
        </li>
        <li>
          <LinkTo @query={{hash page=1 sort="recent-updates"}}>
            Recent Updates
          </LinkTo>
        </li>
        <li>
          <LinkTo @query={{hash page=1 sort="new"}}>
            Newly Added
          </LinkTo>
        </li>
      </dd.Content>
    </Dropdown>
  </div>
</div>

<div id='crates' class='white-rows'>
  {{#each this.model as |crate index|}}
    <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
  {{/each}}
</div>

<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />
